<script setup lang="ts">
import { requiredCheck } from "@/utils/verify";
import { ref, onMounted } from "vue";
import { addData, editData } from "@/api/modules/system/account";

interface Props {
  title?: string;
  sip?: string;
  rowData?: Object;
}

const props = withDefaults(defineProps<Props>(), {
  title: "端口",
  sip: "",
  rowData: undefined
});
defineOptions({
  name: "UpdateForm" // 默认策略
});
import useUpdate from "@/hooks/useUpdate";
import { ifaceAll, ifacemodeUpdate } from "@/api/modules/dynamic-camouflage/line-config";

const emits = defineEmits(["success"]);
const { updateFormData, updateFormRef, updateFormRules, submit, showHandle, openHandle, closeHandle } = useUpdate({
  rules: {
    name: [...requiredCheck("请输入用户名")],
    password: [...requiredCheck("请输入密码")],
    passwordRe: [
      {
        validator: (rule, value, callback) => {
          if (value !== updateFormData.password) {
            callback(new Error("两次输入的密码不一致"));
          } else {
            callback();
          }
        },
        trigger: "blur"
      }
    ]
  },
  defaultData: {
    role: "1"
  }
});
const ifaces = ref([]);

async function getIface() {
  try {
    const res = await ifaceAll();
    console.log(res);
    if (res) {
      ifaces.value = Object.values(res);
      console.log(ifaces.value);
    }
    Object.values(res);
  } catch (error) {}
}

async function submitCb() {
  await submit({
    addApi: addData,
    updateApi: editData,
    sendData: {
      name: updateFormData.name,
      passwordRe: updateFormData.passwordRe || "",
      password: updateFormData.password || "",
      role: updateFormData.role,
      id: updateFormData?.id
    }
  });
  emits("success");
}

function renderBox() {
  const zoomElement = document.querySelector(".cur-box");
  console.log(zoomElement);
  if (zoomElement) {
    zoomElement.addEventListener("wheel", function (e) {
      e.preventDefault();

      let scale = 1;
      const scaleFactor = 0.1;
      const maxScale = 3;
      const minScale = 0.5;
      // 判断滚轮方向
      if (e.deltaY < 0) {
        // 向上滚动 - 放大
        scale = Math.min(scale + scaleFactor, maxScale);
      } else {
        // 向下滚动 - 缩小
        scale = Math.max(scale - scaleFactor, minScale);
      }

      // 应用缩放
      zoomElement.style.transform = `scale(${scale})`;
    });
  }
}

onMounted(() => {
  setTimeout(() => {
    renderBox();
  }, 1500);
});
</script>

<template>
  <div
    class="update-form mg-r-sm"
    style="display: inline-block"
    @click="
      openHandle({
        row: {
          ...rowData
        },
        id: props.rowData?.id
      });

      getIface();
    "
  >
    <slot>
      <el-button type="primary">新增</el-button>
    </slot>
  </div>
  <el-dialog
    draggable
    destroy-on-close
    :fullscreen="true"
    v-model="showHandle"
    v-if="showHandle"
    :show-close="false"
    append-to-body
  >
    <div class="dialog-main" style="width: 100%; display: flex; align-items: center; justify-content: center">
      <div
        style="
          display: flex;
          flex-direction: column;
          align-items: center;
          max-width: calc(100vw - 50px);
          max-height: calc(100vh - 100px);
          overflow: scroll;
          justify-content: center;
        "
        class="cur-box mg-t-lg"
      >
        <div>
          <div v-for="(itemOne, itemOneIndex) in 256" style="height: 10px; display: flex; margin: 1px">
            <template v-for="item in 256">
              <div  :style="{backgroundColor:item%50===0||item%16===6||item%24===4?'var(--el-color-primary)':'#ddd5d5'}" :title="item" class="item cursor-pointer" style="height: 10px; width: 10px; margin: 1px"></div>
            </template>
          </div>
        </div>
      </div>
    </div>
    <template #header>
      <div>
        <slot name="header">
          <div class="dialog-header justify-between w-100">
            <slot name="title">
              <div class="text-bold">{{ title }}</div>
            </slot>
            <div class="h-box">
              <div @click="showHandle = false" title="关闭" class="cursor-pointer mg-l-sm">
                <el-icon>
                  <Close />
                </el-icon>
              </div>
            </div>
          </div>
        </slot>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.dialog-header {
  height: 50px !important;
  display: flex;
  justify-content: space-between;
  padding: 0px 30px;
  width: 96%;

  .text-bold {
    display: flex;
    align-items: center;
  }
}

.box {
  transform: translateY(-42px);
}
</style>
